<template>
    <div class="forgotPassword">
        <div class="title">
            {{ $t('assemble.忘记密码') }}
        </div>

        <div class="inputBox">
            <div class="innerBox">
                <input type="text" class="inputItem" :placeholder="$t('assemble.请输入邮箱号')">
            </div>
            <div class="innerBox">
                <input type="text" class="inputItem" :placeholder="$t('assemble.请输入验证码')">
                <div class="huoqu">{{ $t('assemble.获取') }}</div>
            </div>
            <div class="innerBox">
                <input type="text" class="inputItem" :placeholder="$t('assemble.请输入新密码')">
            </div>
            <div class="innerBox">
                <input type="text" class="inputItem" :placeholder="$t('assemble.请再次输入新密码')">
            </div>
        </div>

        <div class="btns">
            {{ $t('assemble.找回密码') }}
        </div>

    </div>
</template>
  
<script>

export default {
    data() {
        return {
            lang: 'zh',


        }
    },
    created() {

    },
    mounted() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')
        // localStorage.setItem('langtype', 'zh')
    },
    methods: {

    },
}
</script>
  
<style scoped lang="scss">
.forgotPassword {
    @media screen and (max-width: 750px) {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 20px;
            color: #333333;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 70px;
            margin-left: 40px;
        }

        .inputBox {
            width: 335px;
            margin: 0 auto;
            margin-top: 50px;

            .inputItem {
                width: 335px;
                height: 52px;
                background: #F8F8F8;
                border-radius: 10px 10px 10px 10px;
                outline: none;
                border: none;
                margin-bottom: 20px;
                text-indent: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;

            }

            .innerBox {
                position: relative;
            }

            .huoqu {
                color: #E00000;
                position: absolute;
                top: 15px;
                right: 10px;
                font-size: 15px;

            }
        }

        .btns {
            width: 320px;
            height: 44px;
            background: #E00000;
            border-radius: 100px 100px 100px 100px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #FFFFFF;
            line-height: 44px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin: 0 auto;
            margin-top: 58px;
        }
    }

    @media screen and (min-width: 751px) and (max-width: 1300px) {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28px;
            color: #333333;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 140px;
            margin-left: 80px;
        }

        .inputBox {
            width:90%;
            margin: 0 auto;
            margin-top: 50px;

            .inputItem {
                width: 100%;
                height: 82px;
                background: #F8F8F8;
                border-radius: 10px 10px 10px 10px;
                outline: none;
                border: none;
                margin-bottom: 60px;
                text-indent: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;

            }

            .innerBox {
                position: relative;
            }

            .huoqu {
                color: #E00000;
                position: absolute;
                top: 25px;
                right: 20px;
                font-size: 20px;

            }
        }

        .btns {
            width: 90%;
            height: 68px;
            background: #E00000;
            border-radius: 100px 100px 100px 100px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 68px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin: 0 auto;
            margin-top: 58px;
        }
    }

}
</style>
  